<template>
  <div class="container">
    <h1 class="topTitle">Cesium 展示中国拉萨 3D 地形</h1>
    <div class="mapTest" :style="mapWindowStyle">
      <div id="cesiumContainer"></div>
      <div id="loadingOverlay"><h1>Loading...</h1></div>
      <div id="toolbar">
        <div id="terrainMenu"></div>
        <div id="zoomButtons"></div>
        <div id="sampleButtons"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as Cesium from 'cesium'

export default {
  name: 'Map3DDemo3',
  components: {
  },
  data() {
    return {
      map3d: null,
      url: "",
      attr: "",
      viewer: null,
      // screenHeight: document.body.clientHeight,
      mapWindowStyle: {
        height: '0px'
      },
      // isFullScreen: true,
    }
  },
  methods: {
    getHeight() {
      this.mapWindowStyle.height = String(window.innerHeight - 120) + 'px';
    }
  },
  created(){
    window.addEventListener('resize', this.getHeight);
    this.getHeight()
  },
  mounted() {
    var worldTerrain = Cesium.createWorldTerrain({
      requestWaterMask: true,
      requestVertexNormals: true,
    });
    const homeCameraView = {
      // (拉萨市坐标：北纬29.6553895 东经91.1704736)经纬度转换为WGS84世界坐标系，z轴高度
      destination : Cesium.Cartesian3.fromDegrees(91.1704736, 29.5, 20000),
      orientation : {//旋转角度
        heading : 0.0,
        pitch : Cesium.Math.toRadians(-45.0),
        roll : 0.0,
      }
    };
    var viewer = new Cesium.Viewer("cesiumContainer", {
      terrainProvider: worldTerrain,
    });
    viewer.scene.camera.setView(homeCameraView);
    //viewer.camera.setView(homeCameraView);

// set lighting to true
    viewer.scene.globe.enableLighting = true;

// setup alternative terrain providers

    // var ellipsoidProvider = new Cesium.EllipsoidTerrainProvider();
    //
    // var vrTheWorldProvider = new Cesium.VRTheWorldTerrainProvider({
    //   url: "http://www.vr-theworld.com/vr-theworld/tiles1.0.0/73/",
    //   credit: "Terrain data courtesy VT MÄK",
    // });

    // Sandcastle.addToolbarMenu(
    //     [
    //       {
    //         text: "CesiumTerrainProvider - Cesium World Terrain",
    //         onselect: function () {
    //           viewer.terrainProvider = worldTerrain;
    //           viewer.scene.globe.enableLighting = true;
    //         },
    //       },
    //       {
    //         text: "CesiumTerrainProvider - Cesium World Terrain - no effects",
    //         onselect: function () {
    //           viewer.terrainProvider = Cesium.createWorldTerrain();
    //         },
    //       },
    //       {
    //         text: "CesiumTerrainProvider - Cesium World Terrain w/ Lighting",
    //         onselect: function () {
    //           viewer.terrainProvider = Cesium.createWorldTerrain({
    //             requestVertexNormals: true,
    //           });
    //           viewer.scene.globe.enableLighting = true;
    //         },
    //       },
    //       {
    //         text: "CesiumTerrainProvider - Cesium World Terrain w/ Water",
    //         onselect: function () {
    //           viewer.terrainProvider = Cesium.createWorldTerrain({
    //             requestWaterMask: true,
    //           });
    //         },
    //       },
    //       {
    //         text: "EllipsoidTerrainProvider",
    //         onselect: function () {
    //           viewer.terrainProvider = ellipsoidProvider;
    //         },
    //       },
    //       {
    //         text: "VRTheWorldTerrainProvider",
    //         onselect: function () {
    //           viewer.terrainProvider = vrTheWorldProvider;
    //         },
    //       },
    //     ],
    //     "terrainMenu"
    // );

    // Sandcastle.addDefaultToolbarMenu(
    //     [
    //       {
    //         text: "Mount Everest",
    //         onselect: function () {
    //           lookAtMtEverest();
    //         },
    //       },
    //       {
    //         text: "Half Dome",
    //         onselect: function () {
    //           var target = new Cesium.Cartesian3(
    //               -2489625.0836225147,
    //               -4393941.44443024,
    //               3882535.9454173897
    //           );
    //           var offset = new Cesium.Cartesian3(
    //               -6857.40902037546,
    //               412.3284835694358,
    //               2147.5545426812023
    //           );
    //           viewer.camera.lookAt(target, offset);
    //           viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
    //         },
    //       },
    //       {
    //         text: "San Francisco Bay",
    //         onselect: function () {
    //           var target = new Cesium.Cartesian3(
    //               -2708814.85583248,
    //               -4254159.450845907,
    //               3891403.9457429945
    //           );
    //           var offset = new Cesium.Cartesian3(
    //               70642.66030209465,
    //               -31661.517948317807,
    //               35505.179997143336
    //           );
    //           viewer.camera.lookAt(target, offset);
    //           viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
    //         },
    //       },
    //     ],
    //     "zoomButtons"
    // );

    var terrainSamplePositions;

    function lookAtMtEverest() {
      var target = new Cesium.Cartesian3(
          300770.50872389384,
          5634912.131394585,
          2978152.2865545116
      );
      var offset = new Cesium.Cartesian3(
          6344.974098678562,
          -793.3419798081741,
          2499.9508860763162
      );
      viewer.camera.lookAt(target, offset);
      viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
    }

    function sampleTerrainSuccess(terrainSamplePositions) {
      var ellipsoid = Cesium.Ellipsoid.WGS84;

      //By default, Cesium does not obsure geometry
      //behind terrain. Setting this flag enables that.
      viewer.scene.globe.depthTestAgainstTerrain = true;

      viewer.entities.suspendEvents();
      viewer.entities.removeAll();

      for (var i = 0; i < terrainSamplePositions.length; ++i) {
        var position = terrainSamplePositions[i];

        viewer.entities.add({
          name: position.height.toFixed(1),
          position: ellipsoid.cartographicToCartesian(position),
          billboard: {
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            scale: 0.7,
            image: "../images/facility.gif",
          },
          label: {
            text: position.height.toFixed(1),
            font: "10pt monospace",
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            pixelOffset: new Cesium.Cartesian2(0, -14),
            fillColor: Cesium.Color.BLACK,
            outlineColor: Cesium.Color.BLACK,
            showBackground: true,
            backgroundColor: new Cesium.Color(0.9, 0.9, 0.9, 0.7),
            backgroundPadding: new Cesium.Cartesian2(4, 3),
          },
        });
      }
      viewer.entities.resumeEvents();
    }

    function createGrid(rectangleHalfSize) {
      var gridWidth = 41;
      var gridHeight = 41;
      var everestLatitude = Cesium.Math.toRadians(27.988257);
      var everestLongitude = Cesium.Math.toRadians(86.925145);
      var e = new Cesium.Rectangle(
          everestLongitude - rectangleHalfSize,
          everestLatitude - rectangleHalfSize,
          everestLongitude + rectangleHalfSize,
          everestLatitude + rectangleHalfSize
      );
      var terrainSamplePositions = [];
      for (var y = 0; y < gridHeight; ++y) {
        for (var x = 0; x < gridWidth; ++x) {
          var longitude = Cesium.Math.lerp(
              e.west,
              e.east,
              x / (gridWidth - 1)
          );
          var latitude = Cesium.Math.lerp(
              e.south,
              e.north,
              y / (gridHeight - 1)
          );
          var position = new Cesium.Cartographic(longitude, latitude);
          terrainSamplePositions.push(position);
        }
      }
      return terrainSamplePositions;
    }
    //
    // Sandcastle.addToggleButton(
    //     "Enable Lighting",
    //     viewer.scene.globe.enableLighting,
    //     function (checked) {
    //       viewer.scene.globe.enableLighting = checked;
    //     }
    // );
    //
    // Sandcastle.addToggleButton(
    //     "Enable fog",
    //     viewer.scene.fog.enabled,
    //     function (checked) {
    //       viewer.scene.fog.enabled = checked;
    //     }
    // );
    //
    // Sandcastle.addToolbarButton(
    //     "Sample Everest Terrain at Level 9",
    //     function () {
    //       var terrainSamplePositions = createGrid(0.005);
    //       Cesium.when(
    //           Cesium.sampleTerrain(
    //               viewer.terrainProvider,
    //               9,
    //               terrainSamplePositions
    //           ),
    //           sampleTerrainSuccess
    //       );
    //       lookAtMtEverest();
    //     },
    //     "sampleButtons"
    // );
    //
    // Sandcastle.addToolbarButton(
    //     "Sample Most Detailed Everest Terrain",
    //     function () {
    //       if (!Cesium.defined(viewer.terrainProvider.availability)) {
    //         window.alert(
    //             "sampleTerrainMostDetailed is not supported for the selected terrain provider"
    //         );
    //         return;
    //       }
    //       var terrainSamplePositions = createGrid(0.0005);
    //       Cesium.when(
    //           Cesium.sampleTerrainMostDetailed(
    //               viewer.terrainProvider,
    //               terrainSamplePositions
    //           ),
    //           sampleTerrainSuccess
    //       );
    //       lookAtMtEverest();
    //     },
    //     "sampleButtons"
    // );


    this.viewer = viewer;
  }
}
</script>

<style lang="stylus" scoped>
@import '../assets/styles/bucketRaw.css'

@import 'cesium/Build/Cesium/Widgets/widgets.css'
.container
  width: 100%
  h1.topTitle
    text-align: center
    color: red
  .mapTest
    border: 1px solid red
    text-align: left
    #cesiumContainer
      height: 100%
      width: 100%

</style>